import React, { useEffect, useState } from 'react'
import "./Herotext.css"
import axios from 'axios'
import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
export default function Herotext() {
    let [hero, sethero] = useState({})
    // let {id} = useParams()
    let [heroid] = useSearchParams()
    let id = heroid.get("id")
//   let {state} =   useLocation()
//   let id = state.id
let navigate = useNavigate()
let out = ()=>{
    navigate(-2)
}
    useEffect(() => {
        async function main() {
            let { data } = await axios({
                method: "get",
                url: `http://api.xiaohigh.com/heros/${id}`
            })
            sethero(data)
        }
        main()
    }, [])
    return (
        <div className='herotext'>
            <button onClick={out}>回退</button>
            <div className="heros-con">
                <div className="heros-left">
                    <img src={hero.image && `http://cdn.xiaohigh.com${hero.image}`} alt="" />
                    <h2>{hero.name}</h2>
                    <h3>{hero.type}</h3>
                    <div className="img-min">
                        <ul>

                            {
                                hero.skills && hero.skills.map((iteam, index) => {
                                    return <li key={index}>
                                        <img src={`http://cdn.xiaohigh.com${iteam.img}`} alt="" />
                                        <h4>{iteam.name}</h4>
                                    </li>

                                })
                            }


                        </ul>
                    </div>
                </div>
                <div className="heros-right">
                    <img src={hero.big_image && `http://cdn.xiaohigh.com${hero.big_image}`} alt="" />
                    <hr />
                    <p dangerouslySetInnerHTML={{ __html: hero.intro }}>


                    </p>
                </div>
            </div>
        </div>
    )
}
